<!-- subpkg_consult/payment/index.vue -->
<script setup>
	import { ref } from 'vue'
	import { preOrderApi } from '../../services/consult'
	import { patientDetailApi } from '../../services/patient.js'
	import { useConsultStore } from '../../stores/consult'

	const consultStore = useConsultStore()
	const preOrderInfo = ref({})
	const patientInfo = ref({})

	const getPayInfo = async () => {
		const { data } = await preOrderApi(consultStore.type, {
			illnessType: consultStore.illnessType,
		})
		preOrderInfo.value = data
	}
	const getPatientInfo = async () => {
		const { data } = await patientDetailApi(consultStore.petientId)
		patientInfo.value = data
	}
	getPatientInfo()
	getPayInfo()
</script>

<template>
	<scroll-page>
		<view class="payment-page">
			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				:title="`图文问诊 ${preOrderInfo.payment}元`"
			>
				<uni-list :border="false">
					<uni-list-item
						title="极速问诊"
						note="自动分配医生"
						thumb="/static/uploads/doctor-avatar.jpg"
						thumb-size="lg"
					/>
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="`-¥${preOrderInfo.couponDeduction}`"
					/>
					<uni-list-item title="积分抵扣">
						<template #footer>
							<view class="uni-list-text-red">
								-¥{{ preOrderInfo.pointDeduction }}
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="实付款">
						<template #footer>
							<view class="uni-list-text-red">
								¥{{ preOrderInfo.actualPayment }}
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>

			<view class="dividing-line"></view>

			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				title="患者资料"
			>
				<uni-list :border="false">
					<uni-list-item title="患者信息">
						<template #footer>
							<view class="uni-list-text-gray"
								>{{ patientInfo.name }} | {{ patientInfo.genderValue }} |
								{{ patientInfo.age }}岁</view
							>
						</template>
					</uni-list-item>
					<uni-list-item
						border
						title="病情描述"
						:note="consultStore.illnessInfo.illnessDesc"
					/>
				</uni-list>
			</uni-section>

			<!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<view class="total-amount">
				合计: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
			</view>
			<button class="uni-button">立即支付</button>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
